/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { AtSwipeAction } from "taro-ui"
import { Checkbox } from '@tarojs/components'

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton, CColumn } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http, Toast } from '../../../library/func';
import Icon from '../../../project/style/icon';

import DoHttp from '../../../project/func/http/http';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Product extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			list:[],
			selectbar:false,

			is_slectall:false,

			cancelstr:'',

		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {
		//获取接口数据

		this.getData();		
	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (id, e)=> {
		console.log('onClick: ' + id)
	}

    // onRedirect
    onRedirect = (url, e)=> {
        wx.redirectTo({
            url: url
        })
    }

    // onNavigate
    onNavigate = (url, e)=> {

	}


	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/

	config = {
        navigationBarTitleText: '商品收藏',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }


	//获取数据
	getData = () => {
		DoHttp.Loading({
			url:'collect/list.php',
			success:(res)=>{
				this.setState({
					list:res
				}, ()=>{
					for(var key in this.state.list){
						this.state.list[key]['checked'] = false;
					}
				})
				
			}
		});

	}

	//删除数据
	deleteData(str){
		wx.showModal({
			title: '删除',
			content: '确定取消关注',
			success: (res) => {
			  if (res.confirm) {

				DoHttp.post({
					url:'collect/logic/batchCancel.php',
					data:{
						ids:str
					},
					success:(res)=>{
						this.getData();
						wx.showToast({
							title: '取消成功',
							icon: 'success',
							duration: 2000
						})
	
					}
				});
		
			  } else if (res.cancel) {
				console.log('用户点击取消')
			  }
			}
		})		  

	}


	//显示底部部
	onSbarshow = (e) =>{

		if(this.state.selectbar){
			this.setState({
				selectbar:false,
			})
		}else{
			this.setState({
				selectbar:true,
			})

		}

	}
	
	//删除提示
	onDelete = (e)=>{
		let arr = [];
		let list = this.state.list;
		for(var key in list){
			if(list[key]['checked'] == true){
				arr.push(list[key]['collect_id']);
			}
		}

		if(arr.length == 0){
			Toast.text('至少选中一项');
			return;
		}

		let str = arr.join(',');

		this.deleteData(str);

	}

	//选中全部
	selectAll = (e)=>{
		let list = this.state.list;

		if(this.state.is_slectall){
			for(var key in list){
				list[key]['checked'] = false;
			}
			this.setState({
				list:list,
				is_slectall:false,
			})	
		}else{
			for(var key in list){
				list[key]['checked'] = true;
			}
			this.setState({
				list:list,
				is_slectall:true,
			})	

		}
	}

	//选择单个
	selectone = (key, e) => {
		let list = this.state.list;
		let checked = this.state.list[key]['checked'];
		let bool_checked = checked? false : true;
		list[key]['checked'] = bool_checked;
		this.setState({
			list:list
		},()=>{
			console.log(this.state.list)
		})
	}

	//左滑删除
	deleteone = (val, e)=>{
		this.deleteData(val+"");	
	}


	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		let selectall = this.state.is_slectall ?
		<checkbox checked={true}/>
		:
		<checkbox />;


		let btbar = this.state.selectbar ?
		//显示顶部
		<CFooter h='50'>

			<CBetween h="50"  bg='green'>
				<CHand class="f04" x="center" y="center" bg="white" h="50" onClick={ this.selectAll.bind(this) }>
					{selectall}
					<CText size="12">全选</CText>
				</CHand>
				<CHand class="f06" x="center" y="center" bg="#D53B31" h="50" onClick={ this.onDelete.bind(this) }>
					<CText color="white" size="16">取消关注</CText>
				</CHand>
				
			</CBetween>

		</CFooter>
		:
		//不显示顶部
		<CFooter h='0'>
		</CFooter>;


		let editstr = this.state.selectbar?
		<CText color="#666" size="12">完成</CText>
		:
		<CText color="#666" size="12">编辑</CText>;

		return (
			<CPage>

				<CContent style="background:#F7F7F7">
					{/* 顶部*/}

					<CBetween style="width:100%"  bg='#fff' h="30">
						<CHand>
							<CSvg w='15' ml="15" h='15' icon={Icon.store} />
							<CText ml="10">和社区</CText>
						</CHand>
						<CHand>
							<CHand pa="2" ra="5" ba="solid 1px #AEAEAE"  mr="15" onClick={ this.onSbarshow.bind(this) }>
								{editstr}
							</CHand>
						</CHand>
					</CBetween>

 

					{/* 商品列表 */}
					<CColumn h='600' x="center" y="top">

						{this.state.list.map((item, key) =>{
							return(
							<AtSwipeAction autoClose  style="width:100%;" onClick={ this.deleteone.bind(this, item.collect_id) } options={[
								{
									text: '删除',
									style: {
									height:'120px',
									backgroundColor: '#FF4949'
									}
								},
							]}>


							<CItemX class="proc_imgp" bg="white" mx="10" ra="10" y="center" style="width:100%" mt="5">
								{ this.state.selectbar ?  <Checkbox checked={item.checked}  value={item.collect_id} onClick={ this.selectone.bind(this, key) } /> : <view></view> }
								<CImage src={item.object.set_image_small}></CImage>
								<CColumn my="10" mr="10">
									<CLine style="overflow:hidden; font-size:30rpx; line-height:40rpx; height:80rpx">{item.set_name}</CLine>
									<CLine>
										<CText px="5" ra="10" size="12" color="#f00" bg="#FFE4E3">促销价</CText>
									</CLine>
									<CLine>
										<CText size="14">￥{item.set_price}</CText>
										<CText color="#A4A4A4" style="text-decoration:line-through; text-decoration-color:#A4A4A4" size="12">￥{item.set_original_price}</CText>
									</CLine>

									<CLine>
										<CBetween>
											<CText color="#A4A4A4" size="12">销量{item.count_sale}</CText>
											<CSvg w='20' h='20 ' icon={Icon.cart} />

										</CBetween>
									</CLine>
								</CColumn>
							</CItemX>

							</AtSwipeAction>

							)


						})}
					




					</CColumn>
				</CContent>

				{/* Footer */}
				{btbar}

			</CPage>
		)
	}
}


